<template>
	<view class="content">
		<min-action-sheet ref="as"></min-action-sheet>
		
		
		<scroll-view scroll-y class="left-aside">
			<!-- #ifdef MP-WEIXIN -->
			<view class="un-aid" @click="changeType">
				<text v-if="aid===0">兑换商品</text>
				<text v-if="aid===1">现金购商品</text>
				<text class="iconfont icon-shang1" style="font-weight: 100;"></text>
			</view>
			<!-- #endif -->
			<view  v-for="item in first" @click="tabtap(item)" :key="item.CATEGORYID" class="f-item b-b" :class="{active: item.CATEGORYID === currentId}" >
				<view @click="tabtap(item)" class="">
					{{item.CATEGORYNAME}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
			<!-- #ifdef MP -->
			<view :class="sizeCalcState?'mp-search-box':''" >
				<input class="ser-input" type="text" placeholder="输入关键字搜索" @input="handleInput"  @confirm="navToSearch"  />
			</view>
			<view style="height: 56upx;" v-if="sizeCalcState"></view>
			<!-- #endif -->
			<view v-for="item in second" :key="item.CATEGORYID" class="s-list" :id="'main-'+item.CATEGORYID">
				<text class="s-item">{{item.CATEGORYNAME}}</text>
				<view class="t-list" v-if="three.length>0">
				<!-- 点击传参的时候把商品属性值同事传过去,0:兑换1:现金 -->
					<view 
					@click="navToList(item.CATEGORYFATHERID,item.CATEGORYID, titem.CATEGORYID,aid)"
					 v-if="titem.CATEGORYFATHERID === item.CATEGORYID "
					  class="t-item" v-for="titem in three"
					   :key="titem.CATEGORYID"
					   >
					    <image :src="img+titem.CTHUMB" mode="aspectFit"></image>
						<text>{{titem.CATEGORYNAME}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import minActionSheet from '@/components/min-action-sheet/min-action-sheet';
	export default {
		components:{
				minActionSheet
		},
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 0,
				first: [],
				second: [],
				three: [],
				img:'',
				aid:1
			}
		},
		onLoad(){
			this.img = getApp().globalData.imageAddress
			uni.showLoading({
				title: 'loading'
			});
			if(uni.getStorageSync("SIGNATURE")){
				this.loadData();
			}else{
				uni.request({
					url: getApp().globalData.http+'/common/regist', //仅为示例，并非真实接口地址。
					data: {
						BRAND : this.BRAND,
						MODEL : this.MODEL,
						OS : this.OS,
						OSVERSION: this.OSVERSION,
						SCREEN: this.SCREEN,
						RESOLUTION: this.RESOLUTION,
						MIDU: this.MIDU,
						UQID: this.UQID,
						OSID: this.OSID,
						TVERSION: this.TVERSION,
						TYPE: this.TYPE,//A.Android B.iPhone C.iPad
					},
					method:"POST",
					header: {
						'content-type':'application/x-www-form-urlencoded',
					},
					success: (res) => {
						uni.setStorageSync("SIGNATURE",res.data.OBJECT.SIGNATURE);
						this.loadData();
					}
				});
			}
			
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			async loadData(){
				this.$http.post("/goods/findCategory",{
					SIGNATURE : uni.getStorageSync("SIGNATURE"),
				}).then((res)=>{
					console.log("*********",res);
					if(res.statusCode == 200 && res.data.STATE === '0'){
						let demo = res.data.OBJECT
						this.first = demo.FIRST
						this.currentId = this.first[0].CATEGORYID
						this.second = demo.SECOND
						this.second.sort((a,b)=>{
							return a.CATEGORYFATHERID - b.CATEGORYFATHERID
						})
						
						this.three = demo.THREE
					}else{
						uni.showToast({
							title:res.data.MSG,
							icon:'none'
						})
					}
				}).catch((err)=>{
					console.log('request fail',err);
				})
				 uni.hideLoading();
			},
			//一级分类点击
			tabtap(item){
				console.log("点击一级分类传过来",item)
				if(!this.sizeCalcState){
					this.calcSize();
				}
				this.currentId = item.CATEGORYID;
				let index = this.second.findIndex(sitem=>sitem.CATEGORYFATHERID === item.CATEGORYID);
				this.tabScrollTop = this.second[index].top;
			},
			//右侧栏滚动
			asideScroll(e){
				if(!this.sizeCalcState){
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.second.filter(item=>item.top <= scrollTop).reverse();
				if(tabs.length > 0){
					this.currentId = tabs[0].CATEGORYFATHERID;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize(){
				let h = 0;
				this.second.forEach(item=>{
					let view = uni.createSelectorQuery().select("#main-" + item.CATEGORYID);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			//点击分类，查询商品并渲染下一个页面
			navToList(fid,sid, tid,id){
				
				uni.navigateTo({
					url: `/pages/product/list?fid=${fid}&sid=${sid}&tid=${tid}&aid=`+id
				})
				
			},
			//选择分类类型
			changeType(){
				this.$refs.as.handleShow({
					actions: [
						  {
							name: '兑换商品',
							color: '#E02E24',
						  },
						  {
							name: '现金购商品',
							color: '#E02E24',
						  }
					],
					success: (res) => {
						if(res.id!=-1){
							this.aid = res.id
						}
					}
				})
			},
			// #ifdef MP
			//跳转到搜索页面
			handleInput (e) {
				this.search = e.detail.value
			},
			navToSearch(){
				uni.navigateTo({
					url: '/pages/search/searchResult/searchResult?item='+this.search
				})
			}
			// #endif
			
			
		},
		onNavigationBarSearchInputChanged(e) {
			this.search = e.text;
		},
		onNavigationBarSearchInputConfirmed() {
			uni.navigateTo({
				url: '/pages/search/searchResult/searchResult?item=' + this.search
			})
		},
		
		onNavigationBarSearchInputClicked: async function(e) {
			uni.navigateTo({
				url: '/pages/search/searchResult/searchResult?item='+this.search
			})
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			let pages = getCurrentPages();
			let page = pages[pages.length - 1];
			// #ifdef APP-PLUS
			const currentWebview = page.$getAppWebview();
			let titileObj=currentWebview.getStyle().titleNView;
			if(!titileObj.buttons){
				return;
			}
			// #endif
			const index = e.index;
			if (index === 0) {
					this.$refs.as.handleShow({
						actions: [
							  {
								name: '兑换商品',
								color: '#E02E24',
							  },
							  {
								name: '现金购商品',
								color: '#E02E24',
							  }
						],
						success: (res) => {
							if(res.id!=-1){
								this.aid = res.id
							}
							// #ifdef APP-PLUS
							switch (res.id) {
								// -1代表取消按钮
								case -1:
								  console.log(res)
								  break
								case 0:
								  console.log(res)
								  titileObj.buttons[0].text="兑换商品";
								  currentWebview.setStyle({
								  	titleNView:titileObj
								  });
								  break
								case 1:
								  console.log(res);
								  titileObj.buttons[0].text="现金购商品";
								  currentWebview.setStyle({
								  	titleNView:titileObj
								  });
								  break
							}
							// #endif
							// #ifdef H5
								switch (res.id) {
									// -1代表取消按钮
									case -1:
									  console.log(res)
									  break
									case 1:
									  console.log(res);
									  document.getElementsByClassName('uni-btn-icon')[1].innerText = "现金购商品";
									  break
									case 0:
									    console.log(res)
									    document.getElementsByClassName('uni-btn-icon')[1].innerText = "兑换商品";
									    break
								}
							// #endif
							
						}
					})
			} else if (index === 1) {
				uni.navigateTo({
					url: '/pages/search/searchResult/searchResult?item=' + this.search
				})
			}
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
		display: flex;
	}
	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: left;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		padding: 0upx 20upx;
		&.active{
			color: $base-color;
			background: #f8f8f8;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}
	.s-item{
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 26upx;
		color: $font-color-dark;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 25upx;
		color: #666;
		padding-bottom: 20upx;
		
		image{
			width: 140upx;
			height: 140upx;
		}
	}
	/* #ifdef MP */
	.un-aid{
		font-size: 25upx;
		color: #E02E24;
		font-weight: 900;
		padding-left: 20upx;
		line-height: 76upx;
		height: 76upx;
	}
	.mp-search-box {
		position: fixed;
		left: 220upx;
		top: 0upx;
		z-index: 9999;
		width: 70%;
		background: rgba(255, 255, 255, 1);
	}
	.ser-input {
		flex: 1;
		height: 56upx;
		line-height: 56upx;
		text-align: center;
		font-size: 28upx;
		color: $font-color-base;
		border-radius: 20px;
		background: rgba(238, 238, 238, 1);
		margin: 10upx 0upx;
	}
	/* #endif */
</style>
